<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:o="http://java.sun.com/jsf/composite/orr"
    xmlns:p="http://primefaces.org/ui"
    template="/WEB-INF/template/template.xhtml"
    >
    
    
    
    
<ui:define name="body">
 <script>
    
    function success(position) {
      //var mapcanvas = document.createElement('div');
      //mapcanvas.id = 'mapcontainer';
      //mapcanvas.style.height = '400px';
      //mapcanvas.style.width = '600px';
     
     // document.querySelector('article').appendChild(mapcanvas);
     
     document.getElementById('storyForm:hidden1').value = position.coords.latitude;
     document.getElementById('storyForm:hidden2').value =  position.coords.longitude;
     /*
      var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     
      var options = {
        zoom: 16,
        center: coords,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
     
      var marker = new google.maps.Marker({
          position: coords,
          map: map,
          title:"You are here!"
      });

      */
    }
     
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success);
    } else {
      error('Geo Location is not supported');
    }
 
    </script>
    	<h:form id="storyForm">
	
	<o:decorator label="Head Line">

    	
    	<p:inputText value="#{createStoryHome.story.headlines}" required="true" requiredMessage="required" size="30">
    	</p:inputText>
	</o:decorator>
	
	<o:decorator label="Cloud Type">

    	
    	<h:selectOneMenu value="#{createStoryHome.story.cloudType}" required="true" requiredMessage="required">
    		<f:selectItems value="#{createStoryHome.cloudType}" var="c" itemLabel="#{c.toString()}" itemValue="#{c}" />
    	</h:selectOneMenu>
	</o:decorator>
	
	<o:decorator label="Story">
    	<p:inputTextarea value="#{createStoryHome.story.story}" required="true" requiredMessage="required" rows="3" cols="30">
    	</p:inputTextarea>
	</o:decorator>
	
	
	<h:inputHidden id="hidden1" value="#{createStoryHome.story.latitude}" />
	<h:inputHidden id="hidden2" value="#{createStoryHome.story.longitude}" />
		

	<h:commandButton value="save" action="#{createStoryHome.saveStory()}" style="width:300px" />
	</h:form>
    <br />
    <div id="mapcontainer" style="width:400; height:300"></div>
  </ui:define> 
 </ui:composition>